import React, { useCallback, useDeferredValue, useMemo, useState, useTransition } from 'react'

import List from './18-List'

const App = () => {

    const [inpValue,setInpValue] = useState('')
    // useDeferredValue 是一个 React Hook，可以让你延迟更新 UI 的某些部分。
    const deferredValue = useDeferredValue(inpValue)

    const memoList = useMemo(()=>{
      return <List value={deferredValue} />
    },[deferredValue])

    return (
      <div >
        {/* <div>{inpValue}</div> */}
        <input type="text" value={inpValue} onChange={e => setInpValue(e.target.value)} />
        {/* <List value={inpValue} /> */}

        {memoList}
      </div>
  )
}

export default App